<template>
    <div>
        <div class="table-header">
            <el-button type="primary" :icon="Plus">添加</el-button>
        </div>
        <el-table class="goods-table" border :data="ordersData" v-loading="loadding" table-layout="auto">
            <el-table-column prop="id" label="编号" align="center" width="200px"></el-table-column>
            <el-table-column prop="customer.userName" label="客户账号" align="center"></el-table-column>
            <el-table-column prop="customer.address" label="客户地址" align="center"></el-table-column>
            <el-table-column prop="customer.tel" label="客户联系方式" align="center"></el-table-column>
            <el-table-column prop="createDateTime" label="购买日期" align="center"></el-table-column>
            <el-table-column prop="total" label="总消费" align="center" width="200px"></el-table-column>
            <el-table-column label="操作" align="center" width="200px">
                <template #default="scope">
                    <el-button type="primary" :icon="Message" @click="orderDetailsHandler(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <Pagination
                    layout="prev, pager, next"
                    :total="PaginationConfig.total"
                    :page-size="PaginationConfig.pageSize"
                    :page-num="PaginationConfig.pageNum"
                    @pagination="UpdatePage"></Pagination>
        </div>
        <el-drawer
                v-model="drawerVisable"
                title="订单详情"
        >
            <div>
                <h2>客户信息</h2>
                <el-form :model="orderDetails.customer" label-width="120px">
                    <el-form-item>
                        <el-avatar :src="orderDetails.customer.avatar"/>
                    </el-form-item>
                    <el-form-item label="账号">
                        <el-input v-model="orderDetails.customer.userName"/>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="orderDetails.customer.address"/>
                    </el-form-item>
                    <el-form-item label="联系方式">
                        <el-input v-model="orderDetails.customer.tel"/>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <div style="display: flex;justify-content: space-between">
                    <h2>订单信息</h2>

                    <h2>总消费 {{ orderDetails.total }} 元</h2>
                </div>
                <div v-for="(item,index) in orderDetails.goodsMessageList">
                    <div class="order-details-box">
                        <el-image :src="item.cover" class="food-image" fit="fill"/>
                        <div>
                            <div>
                                <el-icon>
                                    <Food/>
                                </el-icon>
                                <span class="order-food-title">{{ item.name }}</span>
                            </div>
                            <div style="display: flex;align-items: center">
                                <el-icon>
                                    <Location/>
                                </el-icon>
                                <span class="order-food-description">  {{ item.description }}</span>
                            </div>
                            <p>{{ item.price }} 元 * {{ item.buyGoodsNumber }} 个</p>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {Message, Edit, Plus, Location, Food} from "@element-plus/icons-vue";
import Pagination from '@/components/Pagination/index.vue'
import {getOrderList} from "@/api/order";
import {useStore} from "vuex";

const store = useStore();
const loadding = ref(true);
const drawerVisable = ref(false);
const ordersData = ref([]);
const PaginationConfig = reactive({
    pageNum: 1,
    pageSize: 9,
    total: 0
})
const orderDetails = reactive({
    total: 0,
    createDateTime: '',
    customer: {
        id: '',
        userName: '',
        avatar: '',
        address: '',
        tel: '',
        state: ''
    },
    business: {
        id: '',
        name: '',
        cover: '',
        userName: '',
        phone: '',
        address: '',
        uploudGoods: '',
        state: ''
    },
    goodsMessageList: []
})
onMounted(() => {
    GetOrderListHandler();
})

function GetOrderListHandler() {
    getOrderList(PaginationConfig.pageNum, PaginationConfig.pageSize, store.getters["business/getUserInfo"].id).then((response) => {
        ordersData.value = response.data.rows;
        PaginationConfig.total = response.data.total;
        loadding.value = false;
    })
}

function UpdatePage(args) {
    loadding.value = true
    PaginationConfig.pageNum = args.page;
    GetOrderListHandler();
}

function orderDetailsHandler(data) {
    drawerVisable.value = true;
    orderDetails.total = data.total;
    orderDetails.customer = data.customer;
    orderDetails.business = data.business;
    orderDetails.goodsMessageList = data.goodsMessageList;
}
</script>

<style scoped>
.table-header {
    display: flex;
    justify-content: right;
    padding-bottom: 20px;
}

.pagination-container {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.food-image :deep(.el-image__inner) {
    width: 100px;
    height: 100px;
    border-radius: 10px !important;
}

.order-details-box {
    display: flex;
    flex-direction: row;
    margin: 8px;
}

.order-details-box > div {
    padding: 8px;
}

.order-food-title {
    font-size: 20px;
    font-weight: bold;
}

.order-food-description {
    color: gray;

}
</style>